<template>
  <div class="home">
    <div class="header">
      <img src="../../../assets/img/review_banner.png" alt="">
      <div class="head-title"><img src="../../../assets/img/hyh.png" alt=""></div>
      <div class="header-btn">
        <span @click="fnClickRules">规则</span>
        <span @click="fnClickPe">客服</span>
      </div>
    </div>
    <div class="content">
      <img src="../../../assets/img/review_bg.jpg" alt="">
      <div class="form">
        <div class="time">
          <div>还剩</div>
          <van-count-down :time="time" millisecond>
            <template #default="timeData">
              <span class="block">{{ timeData.minutes ? timeData.minutes : '00' }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds ? timeData.seconds : '00' }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.milliseconds ? timeData.milliseconds : '00' }}</span>
            </template>
          </van-count-down>
          <div>过期</div>
        </div>
        <van-form @submit="onSubmit">
          <van-field v-model="phoneNumber" name="手机号" label="手机号" placeholder="请输入手机号" />
          <van-button round block type="primary" native-type="submit" style="margin-top:.1rem">
            确认支付
          </van-button>
        </van-form>
        <div class="flex  agree ">
          <van-checkbox v-model="checked" class="public-right"></van-checkbox>
          提交视为已阅读并同意
          <span class="public-color" @click="fnclickPrivacy"> 《隐私政策》</span>
          <span class="public-color" @click="fnclickAgreen"> 《用户协议》</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>秦皇岛五爪螺科技有限公司</div>
      <div class="gray">冀ICP备202311132号-3</div>
      <div><small data-v-a9f2f654="">客服电话：<a class="tel" href="tel:0516-53764328"
            data-v-a9f2f654="">0516-53764328</a></small></div>
    </div>
    <!-- 活动规则弹窗 -->
    <van-popup v-model:show="show" :style="{ height: '70%' }" closeable close-icon="close" round class="rules">
      <div class="rules-title">活动规则</div>
      <div v-for="(item, index) in activityContent" :key="index" class="desc-content">
        {{ item }}
      </div>
    </van-popup>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  setup (props, { attrs, slots, emit }) {
    const router = useRouter()
    const time = ref(10 * 60 * 1000)
    const phoneNumber = ref('')
    const checked = ref(0)
    const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    // 活动规则
    const show = ref(false)
    const activityContent = reactive([
      '1、本活动用户付费29.9元即可获得价值200元话费充值优惠券；',
      '2、话费充值优惠券使用规则：',
      '(1)100元话费优惠券包含：5张满200减10元，10张满100减5元，优惠券单次充值使用一张；',
      '(2)专属话费优惠券使用，您可在下单短信内，点击充值链接-点击优惠充值-输入手机号-登陆领取话费优惠券-选择充值金额-提交购买自动抵扣话费优惠券；',
      '(3)优惠券有效期：领取后1年内有效；',
      '(4)优惠券使用：充值时单张抵扣，不可用于活动价充值商品',
      '3、用户务必妥善保管您的会员卡号等个人信息。若用户账户因用户个人主动泄露或因遭受他人攻击、诈骗等行为导致的损失及后果，平台不承担责任，用户应通过司法、行政等救济途径向侵权行为人追偿。除平台存在过错外，用户应对其账户下的所有行为结果(包括但不限于在线签署各类协议提供信息购买商品及服务，发表评论、售后处理决定等)负责； ',
      '4、因话费充值涉及第三方通信运营商，以及网络系统的不稳定性等原因，充值话费到账时间偶尔存在延迟的情形，尽请谅解。如有问题，可联系客服反馈问题，我们将在第一时间回复并处理问题； ',
      '5、基于风控要求，如您存在多次办理，或推荐者存在刷单等行为均视为违规操作，平台有权拒绝提供发放该礼包；',
      '6、如有疑问，可向本页面客服咨询。'
    ])
    const fnClickRules = () => {
      show.value = true
    }
    const fnclickPrivacy = () => {
      router.push('/privacyAgreement')
    }
    const fnclickAgreen = () => {
      router.push('/agree')
    }
    const onSubmit = () => {
      if (!phoneNumber.value) {
        showToast('请输入手机号')
        return
      }
      if (!reg_tel.test(phoneNumber.value)) {
        showToast('请输入正确手机号')
        return
      }
      if (!checked.value) {
        showToast('请勾选下方用户协议隐私协议')
      }
    }
    const fnClickPe = () => {
      window.open('https://1587819.s4.udesk.cn/im_client/?web_plugin_id=48558')
    }
    return {
      time,
      phoneNumber,
      checked,
      show,
      reg_tel,
      activityContent,
      fnClickRules,
      fnclickPrivacy,
      fnclickAgreen,
      onSubmit,
      fnClickPe
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  font-size: .14rem;
  color: #000;

  .header {
    height: 2.5rem;
    width: 100%;

    .head-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      img{
        width:.25rem
      }
    }

    img {
      width: 100%;
      height: 100%;
    }

    &-btn {
      position: absolute;
      right: 0;
      top: .5rem;
      font-size: .05rem;
      display: flex;
      flex-direction: column;

      span {
        display: inline-block;
        background: rgba(0, 0, 0, 0.6);
        padding: 0.05rem 0.08rem;
        color: #fff;
        border-top-left-radius: 0.05rem;
        border-bottom-left-radius: 0.05rem;
        margin-bottom: 0.1rem;
      }
    }
  }

  .content {
    width: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .agree {
      font-size: .08rem;
      margin-top: .05rem;
      line-height: .15rem;
    }

    .form {
      position: absolute;
      top: .1rem;
      width: 80%;
      margin-left: 10%;

      .time {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .1rem;
        padding-top: .1rem;

        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #d32e22;
        }

        .block {
          display: inline-block;
          width: 22px;
          font-size: 12px;
          color: #fff;
          text-align: center;
          background: red;
          margin: 0 .01rem;
          border-radius: 0.04rem;
        }
      }
    }

    form {
      padding-top: .1rem;
    }

    /deep/.van-cell {
      background-color: #f8f8f8 !important;
      border-radius: .1rem;
    }
  }

  .footer {
    padding: 0.1rem;
    font-size: .05rem;
    color: #fff;
    margin-top: -0.05rem;
    background: #fb4615;

    .gray {
      color: rgb(217, 217, 217);
      margin: .05rem 0;
    }
  }

  /deep/.van-popup--center {
    padding: .1rem;
    padding-top: .2rem;
  }

  .rules {
    .rules-title {
      text-align: center;
      font-weight: 700;
      font-size: .1rem;
      margin-bottom: .15rem;
    }

    div {
      line-height: .2rem;
      text-align: left;
      font-size: .05rem;
    }
  }

  .submit {
    width: 100%;
    background: linear-gradient(90deg, #279eff, #2787ff);
    box-shadow: 0 0.12rem 0.16rem 0 rgba(46, 78, 253, .15);
    color: white;
    text-align: center;
    height: .3rem;
    font-size: .24rem;
    line-height: .3rem;
    border-radius: 3rem;
    margin: .2rem auto;
    padding: .05rem;
    -webkit-animation: bouncedelay 1s infinite linear;
    animation: bouncedelay 1s infinite linear;
  }

  .public-color {
    color: #1576ff;
  }

  .public-margin {
    margin-top: .1rem;
  }

  .public-margin5 {
    margin-top: .05rem;
  }

  .public-margin15 {
    margin-top: .15rem;
  }

  .public-right {
    margin-right: .03rem;
  }

  .title {
    color: #000;
    text-align: left;
    font-size: .12rem;
    margin: .12rem 0;
    font-weight: 700;
  }

  .flex {
    display: flex;
  }

  .red {
    color: red;
  }

  .triangle {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-top: .3rem solid red;
    border-right: .3rem solid transparent;
  }

  .triangle-title {
    color: #fff;
    position: absolute;
    top: 0.05rem;
    left: 0;
    transform: rotate(-45deg);
  }
}

@keyframes bouncedelay {

  0%,
  100% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(0.8);
  }
}</style>
